const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 通过 npm 安装
module.exports = {
  entry: './src/main.js', // 把打包默认入口改成--./src/main.js--.代表当前文件新建的文件夹
  output: {
    path: path.join(__dirname, 'dist'), // 出口路径//__dirname获取当前文件路径
    filename: 'bundle.js', // 出口文件名//改变默认出口./dist/bundle.js
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  module: {
    rules: [
      // loader的规则
      {
        test: /\.css$/i, // 匹配所有的css文件
        // use数组里从右向左运行
        // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
        // 再用 style-loader 将样式, 把css插入到dom中
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        //图片文件的配置(仅使用webpack5版本)
        test: /\.(gif|png|jpg|jpeg)/,
        type: 'asset', //匹配上面文件后，webpack会把他们当做静态资源处理打包
      },
      {
        // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource', //asset/resource不需要打包进入js直接dist/输出--发送一个单独的文件并到处URL
        generator: {
          //生成文件名字-定义规则
          filename: 'font/[name].[hash:6][ext]', //font/[name]固定名字
          //.[hash:6][ext]--hash是随机生成6位[ext]会替换成.eot/.woff
        },
      },
      {
        test: /\.m?js$/, //匹配0-1次表达式
        exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件
        use: {
          loader: 'babel-loader', //使用这个loader处理js文件
          options: {
            //加载器选项
            presets: ['@babel/preset-env'], // 预设:转码规则(用bable开发环境本来预设的)
          }, //@babel/preset-env降级规则-按照这里的规则降级我们的js语法
        },
      },
    ],
  },
  devServer: {
    port: 3000 // 端口号
  }
}
